<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav ul li{
            background: #666;
            color: #fff;
            width: 100px;
            border-bottom: 1px solid #ccc;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .navSelect,.nav ul li:hover {
            color: #00B4E1 !important;
            cursor: pointer;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
    <div style="width: 50%;height: 500px;border:1px solid red;margin: 0 auto">
        <nav class="nav parNav">
            <ul>
                <li>父级标签1</li>
                <li>父级标签2</li>
                <li>父级标签3</li>
                <li>父级标签4</li>
                <li>父级标签5</li>
            </ul>
        </nav>

    </div>

    <script>
        $('nav li').hover(function(){
            var top = $(this).offset().top + 'px';
            var left = $(this).offset().left + $(this).width() + 'px';
            var text = $(this).text();
            $(this).addClass('navSelect')
            $('body .chiNav').remove();
            $('body').append('<nav class="nav chiNav" id="'+ text +'"><ul></ul></nav>')
            for(var i=1;i<=5;i++){
                $('#'+text+' ul').append('<li>'+ text +'-'+ i +'</li>')
            }
            $('#'+text).css({
                'position': 'absolute',
                'top': top,
                'left': left
            })
            $('.chiNav li').click(function(){
                alert($(this).text());
                $('.chiNav').remove();
            })
        },function(){
            $(this).removeClass('navSelect');
//            $('.parNav').each(function(i,item){
//                var flag = true
//                if($(this).hasClass('navSelect')){
//                    flag = false;
//                }
//                if(flag){
//                    $('.chiNav').remove();
//                }
//            })
        })

        $('.chiNav li').click(function(){

        })
    </script>



</body>
</html>